// ------------------------container的样式
body {
  width: 10rem;
  // height: 4500px;
  margin: 0 auto;
  // 页面的header和footer是固定定位，不占位置，防止固定header和footer把网页的主体内容遮住，因此设置上下的padding隔开
  padding-top: 1.506667rem;
  padding-bottom: 1.306667rem;
}

// -------------------------header的样式
.header {
  // 弹性盒子
  display: flex;
  // 固定定位
  position: fixed;
  top: 0;
  // 层级最高
  z-index: 999;
  width: 10rem;
  height: 1.506667rem;
  padding: .333333rem 0;
  background-color: #fff;

  // 左边的城市
  .city {
    width: 1.76rem;
    padding-left: .413333rem;
    line-height: .853333rem;
    font-size: .32rem;
  }

  // 中间的搜索
  .search {
    position: relative;
    flex: 1;

    i {
      // 子绝父相垂直居中
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: .426667rem;
      font-size: .32rem;
      color: #919191;
    }

    input {
      // input默认不会占满search的一行，需要手动设置width：100%，高度和search一致，也需要设置100%
      width: 100%;
      height: 100%;
      padding-left: 1.04rem;
      background-color: #f7f7f7;
      border-radius: .426667rem;
      font-size: .32rem;
    }
  }

  // 右边的聊天
  .chat {
    width: 1.546667rem;
    background: url("../images/header_news.png") no-repeat .666667rem center;
    background-size: .48rem .48rem;
  }
}

// -------------------------banner的样式
.banner {
  position: relative;
  height: 4.333333rem;
  padding: .04rem .4rem 0;

  ol {
    // 弹性盒子，布局内部的指示器空白只在盒子之间显示
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: .546667rem;
    width: .973333rem;
    height: .066667rem;

    li {
      width: .16rem;
      height: .066667rem;
      background-color: #dedede;
      border-radius: .026667rem;

      // 高亮状态
      &.active {
        width: .213333rem;
        background-color: #303030;
      }
    }
  }
}

// --------------------------rentnav的样式
.rentnav {
  display: flex;
  // 两端对齐，中间默认隔开
  justify-content: space-between;
  height: 3rem;
  padding: 0 .4rem;

  a {
    width: 4.453333rem;
  }
}

// --------------------------discount的样式
.discount {
  height: 9.2rem;
  // 大盒子两边设置padding，把内容往中间挤过去
  padding: 0 .4rem;

  .discount_title {
    display: flex;
    // 两端布局
    justify-content: space-between;
    height: 1.026667rem;
    font-size: .48rem;
    line-height: .48rem;

    a {
      width: .186667rem;
      height: .346667rem;
      margin-top: .093333rem;
    }
  }

  .discount_content {
    display: flex;
    justify-content: space-between;

    .item {
      width: 4.48rem;

      .title {
        height: .573333rem;
        margin-top: .333333rem;
        font-size: .373333rem;
      }

      .size {
        height: .573333rem;
        color: #999999;
        font-size: .266667rem;
      }

      .price {
        height: 1.133333rem;
        color: #f39800;
        font-size: .32rem;
      }
    }
  }
}

// ----------------------------recommend的样式
.recommend {
  // 大盒子两边设置padding，把内容往中间挤过去
  padding: 0 .4rem;

  .recommend_title {
    display: flex;
    // 两端布局
    justify-content: space-between;
    height: 1.16rem;
    font-size: .48rem;

    .category {
      display: flex;
      // 设置固定宽度，两端布局
      justify-content: space-between;
      width: 2rem;
      padding-top: .133333rem;
      margin-right: .48rem;

      a {
        position: relative;
        font-size: .346667rem;

        &.active {
          color: #000;
        }

        &.active::before {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: .413333rem;
          width: .266667rem;
          height: .08rem;
          background-color: #0d9eec;
          border-radius: .04rem;
        }
      }
    }
  }

  .item {
    display: flex;
    // 两端布局
    justify-content: space-between;
    // 设置item的高度，与下方的item隔开
    height: 3.04rem;

    .item_img {
      width: 2.933333rem;
    }

    .item_content {
      width: 5.813333rem;

      h3 {
        height: .546667rem;
        font-size: .346667rem;
      }

      .address {
        height: .506667rem;
        color: #a5a5a5;
        font-size: .28rem;
      }

      .route {
        height: .466667rem;
        color: #a5a5a5;
        font-size: .28rem;
      }

      .condition {
        // 父元素是弹性盒子，子元素默认沿着主轴方向，默认向开始方向对齐（默认左对齐）
        display: flex;
        // 设置高度与下面的盒子空开距离
        height: .64rem;

        span {
          width: 1.2rem;
          height: .426667rem;
          border: .013333rem solid #cfcfcf;
          margin-right: .293333rem;
          border-radius: .066667rem;
          color: #999999;
          font-size: .24rem;
          text-align: center;
          line-height: .4rem;
        }
      }

      .price {
        color: #f49902;
        font-size: .266667rem;

        strong {
          font-size: .293333rem;
        }
      }
    }
  }

  .more {
    // 把a标签转换成块级元素，因此待会可以通过margin：0 auto进行水平居中
    display: block;
    width: 6.933333rem;
    height: .986667rem;
    margin: 0 auto;
    margin-bottom: .626667rem;
    background-color: #f2f2f3;
    color: #999999;
    font-size: .32rem;
    text-align: center;
    line-height: .986667rem;
    border-radius: .493333rem;
  }
}

// ----------------------------footer的样式
.footer {
  position: fixed;
  bottom: 0;
  width: 10rem;
  height: 1.306667rem;
  background-color: #fff;
  box-shadow: 0 -0.053333rem .08rem 0 #eee;
  
  ul {
    // 设置ul是弹性盒子
    display: flex;

    li {
      // li标签是等分布局，每个盒子占一份
      flex: 1;

      a {
        // 把a标签转换成块级元素，此时默认占满一行
        display: block;
        padding-top: .2rem;

        img {
          width: .493333rem;
          margin: 0 auto;
        }

        p {
          margin-top: .213333rem;
          font-size: .24rem;
          text-align: center;
        }
      }

      // 第一个li标签中的p标签文字颜色是黑色
      &.active {
        p {
          color: #000;
        }
      }
    }
  }
}
